<template>
  <div class="head">
    <!-- 头部组件 -->
    <el-row :span="24">
      <el-col :span="4">
        <div class="h_left">
          <el-row :span="24">
            <el-col :span="4">
              <div class="logo">
                <img src="@/assets/logo.png" alt="" srcset="" /></div
            ></el-col>
            <el-col :span="20">
              <div class="title">大数据采集汇聚分系统</div>
              <div class="line">
                <div class="line1"></div>
                <span class="line2"></span><span class="line3"></span
                ><span class="line4"></span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="h_center">
          <el-row :span="24">
            <el-col :span="8">
              <div
                :class="this.activeIndex == 1 ? 'active' : 'tab_item'"
                @click="changeHead(1)"
              >
                <p class="p1">互联网泛在数据采集子系统</p>
                <span class="p2">
                  Internet ubiquitous data collection <span>/</span>
                </span>
              </div>
            </el-col>

            <el-col :span="8">
              <div
                :class="this.activeIndex == 2 ? 'active' : 'tab_item'"
                @click="changeHead(2)"
              >
                <p class="p1">其他来源地学数据引接子系统</p>
                <span class="p2">
                  Introduction of geoscience data from other sources
                  <span>/</span>
                </span>
              </div>
            </el-col>
            <el-col :span="8">
              <div
                :class="this.activeIndex == 3 ? 'active' : 'tab_item'"
                @click="changeHead(3)"
              >
                <p class="p1">数据清洗处理子系统</p>
                <span class="p2"> Data cleaning processing </span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="h_right">
          <i class="el-icon-user-solid"></i><span>请登录</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 3,
    };
  },
  methods: {
    changeHead(num) {
      switch (num) {
        case 1:
          this.activeIndex = 1;
          this.$emit("fn", this.activeIndex);
          break;
        case 2:
          this.activeIndex = 2;
          this.$emit("fn", this.activeIndex);
          break;
        case 3:
          this.activeIndex = 3;
          this.$emit("fn", this.activeIndex);
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.head {
  width: 100%;
  height: 80px;
  background: #1a2e44;
  box-shadow: 0px 2px 3px 1px #c9c9c9;
  opacity: 1;
  .h_left {
    height: 80px;
    .logo {
      height: 64px;
      padding: 10px;
      box-sizing: border-box;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      height: 60px;
      font-size: 24px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #ffffff;
      line-height: 60px;
    }
    .line {
      position: relative;
      .line1 {
        width: 51px;
        height: 4px;
        background: #2d8dfc;
        opacity: 0.8;
        margin-left: 50px;
      }
      .line2 {
        display: inline-block;
        width: 11px;
        height: 4px;
        background: #2d8dfc;
        opacity: 0.4;
        position: absolute;
        top: 0px;
        left: 105px;
      }
      .line3 {
        display: inline-block;
        width: 11px;
        height: 4px;
        background: #2d8dfc;
        opacity: 0.4;
        position: absolute;
        top: 0px;
        left: 120px;
      }
      .line4 {
        display: inline-block;
        width: 171px;
        height: 4px;
        background: #2d8dfc;
        opacity: 0.4;
        position: absolute;
        top: 0px;
        right: 45px;
      }
    }
  }
  .h_center {
    height: 80px;
    .tab_item {
      cursor: pointer;
      color: #8d97a2;
      font-weight: 900;
      font-family: PingFang SC-Medium, PingFang SC;
      position: relative;
      .p1 {
        font-size: 22px;
        line-height: 20px;
        margin-bottom: 5px;
      }
      .p2 {
        font-size: 12px;
        line-height: 2px;

        span {
          font-size: 36px;
          font-weight: 400;
          display: block;
          position: absolute;
          top: 8px;
          right: 0;
        }
      }
    }
    .active {
      cursor: pointer;
      color: #fff;
      font-weight: 900;
      font-family: PingFang SC-Medium, PingFang SC;
      position: relative;
      .p1 {
        font-size: 22px;
        line-height: 20px;
        margin-bottom: 5px;
      }
      .p2 {
        font-size: 12px;
        line-height: 2px;

        span {
          font-size: 36px;
          font-weight: 400;
          display: block;
          position: absolute;
          top: 8px;
          right: 0;
          color: #8d97a2;
        }
      }
    }
  }
  .h_right {
    color: #fff;
    font-size: 20px;
    line-height: 80px;
    i {
      margin-right: 20px;
      font-size: 30px;
    }
    span {
      display: inline-block;
    }
  }
}
</style>